<template>
  <div class="choose-view">
    <div class="bread-con">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>pre-data</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="case编号：">
        <el-input v-model="formInline.caseNumber" placeholder="输入case编号"></el-input>
      </el-form-item>
      <el-form-item label="case名称：">
        <el-input v-model="formInline.caseName" placeholder="输入case名称"></el-input>
      </el-form-item>
      <el-form-item label="pre-data名称：">
        <el-input v-model="formInline.preDataName" placeholder="输入pre-data"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onQuery">查询</el-button>
        <el-button type="primary" @click="onEmptied">清空</el-button>
      </el-form-item>
      <el-form-item class="test-case-con">
        <router-link class="test-add-btn" to="addPre">新增pre-data</router-link>
      </el-form-item>
    </el-form>
    <div class="test-table">
      <el-table
        :data="accountDataList"
        border
        style="width: 100%">
        <el-table-column
          prop="preDataName"
          align="center"
          label="pre-data名称">
        </el-table-column>
        <el-table-column
          prop="caseNumber"
          align="center"
          label="case编号">
        </el-table-column>
        <el-table-column
          prop="caseName"
          align="center"
          label="case名称">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center">
          <template scope="scope">
            <el-button @click="testEdit(scope.$index, accountDataList)" type="text" size="small">编辑</el-button>
            <el-button @click="testRemove(scope.$index, accountDataList)" type="text" size="small"
                       class="test-remove-color">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="choose-page">
      <test-page :table-list="accountDataList" :table="accountData" @get-table-list="getPageList"
                 @get-table-data="getPageData" :url="dataUrl" :query-data="search"></test-page>
    </div>
  </div>
</template>
<script type='text/ecmascript-6'>
  import Page from '@/components/testPage.vue';
  import Choose from '../consoleUrl.js';
  const sucStatus = 200;
  export default {
    data() {
      return {
        formInline: {
          caseNumber: '',
          preDataName: '',
          caseName: ''
        },
        defPageSize: 10,
        defPageNum: 1,
        accountDataList: [],
        accountData: {},
        dataUrl: Choose.preData,
        search: ''
      };
    },
    created () {
      this.$ajax({
        method: 'GET',
        url: Choose.preData + '?pageSize=10&pageNum=1'
      }).then((response) => {
        if (response.status === sucStatus) {
          this.accountDataList = response.data.data.list;
          response.data.data.list.forEach(function (v, k) {
            v.createTime = new Date(v.createTime).toLocaleString().replace(/:\d{1,2}$/, ' ');
          });
          this.accountData = response.data.data;
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: 'error'
          });
        }
      });
    },
    components: {
      'test-page': Page
    },
    methods: {
      getPageList: function (list) {
        list.forEach(function (v, k) {
          v.createTime = new Date(v.createTime).toLocaleString().replace(/:\d{1,2}$/, ' ');
        });
        this.accountDataList = list;
      },
      getPageData: function (data) {
        this.accountData = data;
      },
      handleClickEdit: function (scope) {
        console.log(scope.row.id);
      },
      handleClickMaintain: function (scope) {
        console.log(scope.row.id);
      },
      handleClickDelete: function (scope) {
        console.log(scope.row.id);
      },
      onQuery: function () {
        this.search = `&caseName=${this.formInline.caseName}&caseNumber=${this.formInline.caseNumber}&preDataName=${this.formInline.preDataName}`;
        this.getQueryData(this.search);
      },
      onEmptied: function () {
        this.search = '';
        this.formInline.caseNumber = '';
        this.formInline.caseName = '';
        this.formInline.preDataName = '';
        this.getQueryData(this.search);
      },
      getQueryData: function (str) {
        this.$ajax({
          method: 'GET',
          url: `${Choose.preData}?pageSize=${this.defPageSize}&pageNum=${this.defPageNum}${str}`
        }).then((response) => {
          if (response.status === sucStatus) {
            this.accountDataList = response.data.data.list;
            response.data.data.list.forEach(function (v, k) {
              v.createTime = new Date(v.createTime).toLocaleString().replace(/:\d{1,2}$/, ' ');
            });
            this.accountData = response.data.data;
          } else {
            this.$message({
              showClose: true,
              message: response.data.message,
              type: 'error'
            });
          }
        });
      },
      testEdit(id, list) {
        this.$router.push({
          name: 'addPre',
          params: {
            type: 'add',
            templateType: list[id]
          }
        });
      },
      testRemove(i, list) {
        this.$confirm('此操作将永久删除case, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$ajax({
            method: 'DELETE',
            url: Choose.preData + '?id=' + list[i].id
          }).then((response) => {
            if (response.status !== sucStatus) {
              this.$message({
                showClose: true,
                message: response.data.message,
                type: 'error'
              });
            } else {
              list.splice(i, 1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../static/css/querySearch.styl"
  .test-table
    padding: 20px 0 0 0;

  .test-table .test-remove-color
    color: #FF4949;

  .test-table .test-remove-color:hover
    color: red;

  .test-case-con
    float: right;

  .test-add-btn
    display: inline-block;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid #ddd;

</style>
